<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="...">
    <style>
        /* img{width: 500px;} */
    </style>
    <script>
        // onload = function(){
        //     console.log(document.getElementById("box"));
        // }
    </script>
</head>
<body>
    <div id="box"></div>
    <img src="./1.jpg" alt="" id="img">
</body>
<script src="..."></script>
<script>

    // console.log(document.getElementById("box"));

    // var img = document.getElementById("img")
    // console.log(img)

    // onload = function(){
    //     console.log(img.offsetWidth);
    // }


    // onscroll = function(){
        // console.log(1)
        // 滚走了的距离
        // console.log(document.documentElement.scrollTop);
        // console.log(document.documentElement.scrollLeft);
    // }


    // onresize = function(){
        // console.log(1)
        // 浏览器可视区域的尺寸
        // console.log(document.documentElement.clientWidth);
        // console.log(document.documentElement.clientHeight);
    // }
</script>
</html>